<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>富豪榜</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <!-- 导航栏 -->
  <nav>
    <ul>
      <li>主页</li>
      <li>排行榜</li>
      <li>联系方式</li>
    </ul>
  </nav>
  <!-- 头部内容 -->
  <header>
    <!-- 导航栏的按钮 -->
    <button id="toggle">导航栏</button>
    <!-- 标题 -->
    <h2>欢迎来到富豪排行榜</h2>
    <!-- 欢迎语句 -->
    <p>weclome to the rich rank</p>
  </header>
  <!-- 主题内容 -->
  <div class="container">
    <!-- 左盒子 -->
    <aside>
      <!-- 五个按钮 -->
      <button id="add-user">添加账户</button>
      <button id="double">资金翻倍</button>
      <button id="show-millionaire">查询百万富翁</button>
      <button id="sort">财富榜</button>
      <button id="calculate">计算总额</button>
    </aside>
    <!-- 右盒子 -->
    <main id="main">
      <h2>
        <strong>Person</strong>
        <span>Wealth</span>
      </h2>
    </main>
  </div>

  <script>
    let dataInfo = [{
        name: "安东尼 戴维斯",
        money: 892001
      },
      {
        name: "凯里 欧文",
        money: 668932
      },
      {
        name: "史蒂夫 库里",
        money: 698756
      },
      {
        name: "德里克 罗斯",
        money: 492489
      },
      {
        name: "保罗 乔治",
        money: 853957
      },
      {
        name: "勒布朗 詹姆斯",
        money: 968472
      },
      {
        name: "詹姆斯 哈登",
        money: 718225
      },
      {
        name: "凯文 杜兰特",
        money: 889147
      },
    ];

    let addBtn = document.querySelector("#add-user");
    let douBtn = document.querySelector("#double");
    let showBtn = document.querySelector("#show-millionaire");
    let sortBtn = document.querySelector("#sort");
    let calBtn = document.querySelector("#calculate");
    let main = document.querySelector("#main");
    let index = 0;

    // 添加内容
    addBtn.addEventListener("click", function(){
      if(index < dataInfo.length){
        let h2 = document.createElement("h2");
        h2.innerHTML = "<string>" + dataInfo[index].name + "</string>" + "<span>" + dataInfo[index].money +"</span>";
        main.appendChild(h2);
        h2.style.height = "38px";
        index++;
      }
    });

    // 资金翻倍
    douBtn.addEventListener("click",function(){
      let moneyAll = main.querySelectorAll("h2:not(:first-child)");
      moneyAll.forEach(function(item){
        if(item.lastChild.innerHTML<9999999999999){
          item.lastChild.innerHTML=(item.children[1].innerHTML)*2;
        }
      })
    });
    // 查询百万富翁
    showBtn.addEventListener("click",function(){
      let showAll = main.querySelectorAll("h2:not(:first-child)");
      showAll.forEach(function(item,index){
        if(item < 1000000){
          showAll.remove();
        }
      })
    });


    // 财富榜 从大到小排序
    sortBtn.addEventListener("click",function(){
      let sortArr = [];
      let sortAll = main.querySelectorAll("h2:not(:first-child)");
      sortAll.forEach(function (item) {
          sortArr.push(item);
      });
      sortArr.sort(function(a,b){
        return b.lastChild.innerHTML - a.lastChild.innerHTML;
      });
      sortArr.forEach(function(item){
        main.appendChild(item);
        // console.log(item);
      });
    });

    // 计算总额
    calBtn.addEventListener("click",function(){ 
      if(index < dataInfo.length){
        let h2 = document.createElement("h2");
        h2.innerHTML = "<string>" + "总额" + "</string>" + "<span>" + dataInfo[index].money +"</span>";
        h2.style.height = "38px";  
      } 
    })
  </script>
</body>

</html>